// import { useEffect, useState, useRef, useLayoutEffect } from 'react';
// import { Button, Drawer } from 'antd';
// import img from './imgs/1.png';
// import styles from './CareerNote.less';
// import html2canvas from 'html2canvas';
// import JSZip from 'jszip';
// import { saveAs } from 'file-saver';
// interface MainImageCardProps {
//   data: {
//     title: string;
//     icon?: string;
//     bottomText: string;
//   };
// }
// const demoList = [
//   {
//     title: '好员工一旦寒了心 就开始躺平摆烂了',
//     icon: '',
//     bottomText: '职场干货｜自我提升｜认知觉醒',
//     textList: [
//       '1.职场干货｜自我提升｜认知觉醒',
//           `1、什么都无所谓了。领导问我意见，我就说没意见;领导要非让我说，我就照实说两句。领导要不爱听，我就说我错了，您说。领导要给开会我上课，我就看手机，不辩论。
//       领导说我不行，我就认不行。领导说要改革，我就坚决拥护，您说怎么改我就跟着改，您喊什么我就跟着喊什么，当好排头兵。`,
//       `3、什么都听领导的，领导说什么，就是什么什么我都不掰扯，领导怎么说，我就怎么干，领导说一下，我就动一下，领导没说清，我就停那不动。`,
//     ],
//   },
// ];



// const TextCard = ({ data }) => {
//   const containerRef = useRef(null); // 用于获取容器的高度
//   const [containers, setContainers] = useState([[]]); // 用于存储分割后的文本容器
//   const [containerHeight, setContainerHeight] = useState(0); // 存储容器的有效高度
//   const textSpacing = 20; // 每个text之间的上下间距
//   const fontSize = 30; // 设置字体大小为30px

//   useLayoutEffect(() => {
//     // 在每次渲染后计算容器的有效高度
//     if (containerRef.current) {
//       const totalHeight = 690; // 获取容器的总高度
//       const padding = 30 * 2; // 上下padding各30px
//       setContainerHeight(totalHeight - padding); // 减去padding后为实际可用的高度
//     }
//   }, []);

//   const calculateTextHeight = (text) => {
//     const tempDiv = document.createElement('div');
//     tempDiv.innerHTML = text;
//     tempDiv.style.fontSize = `${fontSize}px`; // 设置字体大小
//     tempDiv.style.lineHeight = '1.5'; // 设置行高
//     tempDiv.style.marginBottom = `${textSpacing}px`; // 设置上下的间距
//     tempDiv.style.display = 'inline-block'; // 确保元素的显示方式影响高度
//     tempDiv.style.boxSizing = 'border-box'; // 确保包括padding和border在内
//     document.body.appendChild(tempDiv);

//     const containerWidth = 486; // 容器宽度
//     const charWidth = 30; // 每个字符的宽度
//     const totalChars = text.length;
//     const charsPerLine = Math.floor(containerWidth / charWidth);
//     const lines = Math.ceil(totalChars / charsPerLine);
//     // 获取每个行的高度
//     const linesCount = lines === 1 ? lines : lines;
//     return linesCount * charWidth * 1.4;
//   };

//   useLayoutEffect(() => {
//     // 根据容器的高度分割文本
//     let currentHeight = 0;
//     let currentContainer = [];
//     let newContainers = [];

//     data.forEach((text) => {
//       const tempHeight = calculateTextHeight(text); // 使用改进的文本高度计算方法

//       console.log(tempHeight,'tempHeight')
//       // 判断当前文本是否能放入当前容器
//       if (currentHeight + tempHeight <= containerHeight) {
//         currentContainer.push(text);
//         currentHeight += tempHeight + textSpacing; // 累加当前文本的高度和间距
//       } else {
//         // 如果超出容器高度，将当前容器的文本推入新的容器
//         newContainers.push(currentContainer);
//         currentContainer = [text];
//         currentHeight = tempHeight + textSpacing;
//       }
//     });

//     // 如果还有剩余的文本，添加到新容器中
//     if (currentContainer.length > 0) {
//       newContainers.push(currentContainer);
//     }

//     setContainers(newContainers);
//   }, [data, containerHeight]);

//   return (
//     <div>
//       {containers.map((container, index) => (
//         <div
//           key={index}
//           className="phone_card_content"
//           id={`phone_card_content_${index}`}
//           style={{
//             width: '486px',
//             height: '690px',
//             padding: '30px',
//             background: '#eee',
//           }}
//           ref={containerRef}
//         >
//           {container.map((text, subIndex) => (
//             <div
//               key={subIndex}
//               style={{
//                 marginBottom: `${textSpacing}px`,
//                 fontSize: `${fontSize}px`,
//               }}
//             >
//               {text}
//             </div>
//           ))}
//         </div>
//       ))}
//     </div>
//   );
// };

// const MainImageCard = (props: MainImageCardProps) => {
//   const { data } = props;
//   return (
//     <div className={styles?.phone_card_content} id="MainImageCard">
//       <div className={styles.phone_title}>{data?.title}</div>
//       <div className={styles?.img}>
//         <img src={img}></img>
//       </div>
//       <div className={styles?.phone_card_bottom_text}>
//         职场干货｜自我提升｜认知觉醒
//       </div>
//     </div>
//   );
// };
// export default function CareerNote() {
//   const handleDownload = async () => {
//     try {
//       const zip = new JSZip();
//       const imgUrl = document.getElementById('MainImageCard') as HTMLElement;

//       // 使用 html2canvas 将 div 转换为 canvas
//       const canvas = await html2canvas(imgUrl, {
//         allowTaint: true,
//         useCORS: true, // 允许跨域图片
//       });

//       // 将 canvas 转换为 Blob
//       canvas.toBlob(async (blob: any) => {
//         // 将图片添加到 zip 文件
//         zip.file('div-content.png', blob);
//         zip.file('div-content1.png', blob);

//         // 生成 zip 文件
//         const content = await zip.generateAsync({ type: 'blob' });

//         // 使用 FileSaver 保存文件
//         saveAs(content, 'div-archive.zip');
//       });
//     } catch (error) {
//       console.error('Error generating zip:', error);
//       alert('下载失败，请重试！');
//     }
//   };
//   return (
//     <div>
//       <h2>Yay! Welcome to umi!</h2>
//       <span>中</span>
//       <p>
//         To get started, edit <code>pages/index.tsx</code> and save to reload.
//       </p>
//       <Drawer width={1000} open={false} title="模拟预览">
//         <div className={styles?.drawer_wrapper}>
//           <Button onClick={handleDownload}>下载</Button>
//           <MainImageCard
//             data={{
//               title: '好员工一旦寒了心 就开始躺平摆烂了',
//               icon: '',
//               bottomText: '职场干货｜自我提升｜认知觉醒',
//             }}
//           />
//           <TextCard data={demoList[0]?.textList}></TextCard>
//         </div>
//       </Drawer>
//     </div>
//   );
// }

import React from 'react'

export default function CareerNote() {
  return (
    <div>CareerNote</div>
  )
}
